<template>
  <div>
    <el-cascader :props="addressProps" placeholder="请选择类别(可搜索)" :options="options" clearable filterable @change="getCheckedNodes"></el-cascader>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      // 地址配置项
      options: [],
      addressProps: {
        lazy: true,
        value: 'id',
        label: 'name',
        expandTrigger: 'hover',
        checkStrictly: true,
        lazyLoad (node, resolve) {
          const ax = axios.create()
          const config = {
            headers: {
              'Content-Type': 'application/json',
              Authorization: window.sessionStorage.getItem('TOKEN_KEY')
            }
          }
          // console.log(node)
          // console.log(node.value)
          var level = node.level
          ax.post('article/api/v1/article/load_category/', { parent_id: node.value }, config).then(res => {
            if (res.data.code === 0) {
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              // console.log(res.data)
              // console.log(level)
              if (level === 2) {
                res.data.data.forEach(item => {
                  item.leaf = level >= 2
                })
              }
              resolve(res.data.data)
            } else {
              this.$message.error(res.data)
            }
          }).catch((e) => {
            console.log(e)
            console.log('哎呀！出错了！')
          })
        }
      }
    }
  },
  created () {
  },
  // DOM对象加载完成时
  mounted () {},
  methods: {
    getCheckedNodes (leafOnly) {
      // console.log(leafOnly)
      this.$emit('categoriesCallBack', leafOnly)
    }
  },
  computed: {},
  name: 'categoriesCascader',
  components: {}
}
</script>

<style lang="less" scoped>

</style>
